import createEditor from './editor'
import background from './better.png'
import './global.css'

// 创建页面元素
const editor = createEditor()
// 将创建元素追加到页面中
document.body.appendChild(editor)

const img = new Image()
img.src = background
document.body.appendChild(img)

// ============ 以下用于处理 HMR，与业务代码无关 ============

// console.log(createEditor)

if (module.hot) {
  // 存储原来的元素
  let lastEditor = editor
  // 用于注册模块更新后的处理函数
  // 第一个参数是依赖模块的路径，第二个参数是依赖模块更新后的处理函数
  module.hot.accept('./editor', () => {
    // console.log('editor 模块更新了，需要这里手动处理热替换逻辑')
    // console.log(createEditor)

    // 获取原来的文本框内容
    const value = lastEditor.innerHTML
    // 移除原来的元素
    document.body.removeChild(lastEditor)
    // 创建新的元素
    const newEditor = createEditor()
    // 将文本框内容放到新元素当中 解决文本框内容丢失问题
    newEditor.innerHTML = value
    // 将新元素追加到页面上
    document.body.appendChild(newEditor)
    lastEditor = newEditor
  })


  // 图片热替换
  module.hot.accept('./better.png', () => {
    // background为图片更新后的路径
    img.src = background
    console.log(background)
  })
}
